<template>
  <div class="home" style="overflow: hidden" :style="b_style">
    <el-row>
      <el-col :span="22" class="c-top-bar c-top-bar-reg"></el-col>
      <el-col :span="2" class="c-top-bar">
        <el-row>
          <el-col :span="12" class="c-top-btn" @click="min">
            <!--            <span>一</span>-->
            <el-link :underline="false">一</el-link>
          </el-col>
          <el-col :span="12" class="c-top-btn" @click="close">
            <!--            <span>X</span>-->
            <el-link :underline="false" class="c-top-btn-close">X</el-link>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-col>
      <el-container>
        <el-aside width="200px" style="overflow-y: scroll" :style="m_style" class="c-aside">
          <el-menu
              default-active="1"
              style="width: 100%"
          >
            <el-menu-item index="1" @click="$router.push({path: '/main'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <House/>
              </el-icon>
              <template #title>
                主页
              </template>
            </el-menu-item>

            <el-menu-item index="2" @click="$router.push({path: '/monitor'})">
              <el-icon>
                <Monitor/>
              </el-icon>
              <template #title>
                开服监控
              </template>
            </el-menu-item>

            <el-menu-item index="3" @click="$router.push({path: '/routine'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <Notebook/>
              </el-icon>
              <template #title>
                日常任务
              </template>
            </el-menu-item>

            <el-menu-item index="4" @click="$router.push({path: '/gold'})">
              <el-icon>
                <ShoppingTrolley/>
              </el-icon>
              <template #title>
                金币比例
              </template>
            </el-menu-item>
            <el-menu-item index="5" @click="$router.push({path: '/notice'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <Message/>
              </el-icon>
              <template #title>
                维护公告
              </template>
            </el-menu-item>

            <el-menu-item index="6" @click="$router.push({path: '/topic'})">
              <el-icon>
                <Reading/>
              </el-icon>
              <template #title>
                科举试题
              </template>
            </el-menu-item>

            <el-menu-item index="7" @click="$router.push({path: '/meet'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <MilkTea/>
              </el-icon>
              <template #title>
                奇遇大全
              </template>
            </el-menu-item>

            <el-menu-item index="8" @click="$router.push({path: '/meetSearch'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <MilkTea/>
              </el-icon>
              <template #title>
                奇遇查询
              </template>
            </el-menu-item>

            <el-menu-item index="9" @click="$router.push({path: '/flower'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <Orange/>
              </el-icon>
              <template #title>
                鲜花价格
              </template>
            </el-menu-item>

            <el-menu-item index="10" @click="$router.push({path: '/implements'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <GobletSquareFull/>
              </el-icon>
              <template #title>
                器物图谱
              </template>
            </el-menu-item>
            <el-menu-item index="11" @click="$router.push({path: '/achievement'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <Collection/>
              </el-icon>
              <template #title>
                成就大全
              </template>
            </el-menu-item>

            <el-menu-item index="12" @click="$router.push({path: '/copy'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <Collection/>
              </el-icon>
              <template #title>
                副本攻略
              </template>
            </el-menu-item>

            <el-menu-item index="13" @click="$router.push({path: '/task'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <Collection/>
              </el-icon>
              <template #title>
                任务大全
              </template>
            </el-menu-item>

            <el-menu-item index="19">
              <el-icon>
                <Collection/>
              </el-icon>
              <template #title>
                其他(待添加)
              </template>
            </el-menu-item>

            <el-menu-item index="20" @click="$router.push({path: '/setting'})">
              <!--              <el-icon><icon-menu /></el-icon>-->
              <el-icon>
                <Setting/>
              </el-icon>
              <template #title>
                设置
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main style="overflow-y: scroll" :style="b_style">
          <router-view/>
        </el-main>
      </el-container>

    </el-col>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'HomeView',
  data() {
    return {
      b_style: {
        height: document.documentElement.clientHeight + 'px'
      },
      m_style: {
        height: (document.documentElement.clientHeight - 40) + 'px'
      }
    }
  },
  methods: {
    close() {
      window.ipcRendererApi.send('winClose')
    },
    min() {
      window.ipcRendererApi.send('winMin')
    }
  }
});
</script>
<style>
.c-aside::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
